<template>
  <div class="details-page">
    <div class="container" :class="{ isTop: isTop }">
      <!-- 左侧列表 -->
      <transition name="slide-fade">
        <div v-show="toggle" class="patent-list">
          <div class="tool" @click="handleToggle">
            <h2>{{ listName }}</h2>
            <span
              title="收起"
              class="pack-up iconfont icon-shouqiliebiao"
            ></span>
          </div>

          <ul class="list-wrap">
            <li
              v-for="(item, index) in patentList"
              :key="index"
              :class="{ active: item.id === $route.query.id }"
              @click="toDetail(item)"
            >
              <span class="index">{{ index + 1 }}</span>
              <p>
                <span v-if="listName != '论文列表'" :title="item.id">{{
                  item.id
                }}</span>
                <span :title="item.title" v-html="item.title"></span>
              </p>
            </li>
          </ul>
        </div>
      </transition>

      <!-- 折叠筛选项 -->
      <aside v-show="!toggle" class="aside-bar" @click="handleToggle">
        <span class="iconfont icon-zhankailiebiao"></span>
      </aside>
      <!-- 右侧 -->
      <div class="details-main" :class="{ 'double-box': showDoubleScreen }">
        <!-- 标题 -->
        <div class="flex">
          <h2 class="flex-auto" :title="title">
            <div class="tit-wrapper">
              <p>
                <span v-if="type == 'patent'">{{ publicInfo.pn }}</span>
                <span v-html="title"></span>
              </p>
              <p>
                <!-- 收藏 -->
                <el-tooltip
                  :content="!publicInfo.isCollection ? '收藏' : '取消收藏'"
                  placement="top"
                >
                  <a
                    class="collect"
                    :class="{
                      'el-icon-star-on': publicInfo.isCollection,
                      'el-icon-star-off': !publicInfo.isCollection,
                    }"
                    @click="handleCollect"
                  ></a>
                </el-tooltip>
              </p>
            </div>
            <span v-if="title_cn">
              <span class="transIcon">译</span><span v-html="title_cn"></span
            ></span>
          </h2>
          <el-button class="btn" v-if="url" @click="goOrigin(url)"
            >查看原文</el-button
          >
        </div>
        <div class="main-box" :class="{ 'double-box': showDoubleScreen }">
          <div class="main-item-box">
            <p class="link_url" v-if="type == 'paper' && publicInfo.doi != ''">
              <a :href="`https://doi.org/${publicInfo.doi}`" target="_blank"
                >原文链接</a
              >
            </p>
            <!-- 正文部分 包含两级tab -->
            <Tabs
              v-if="Object.keys(publicInfo).length > 0"
              citationId="container1"
              :type="type"
              :id="id"
              achievementId="achId1"
              :publicInfo="publicInfo"
            />
            <div v-else class="no-data">
              <loading1 :emptyText="emptyText" />
            </div>
          </div>
          <div v-if="showDoubleScreen" class="main-item-box">
            <!-- 正文部分 包含两级tab -->
            <Tabs
              citationId="container2"
              achievementId="achId2"
              :type="type"
              :id="id"
              :publicInfo="publicInfo"
            />
          </div>
        </div>
        <!-- 双屏展示 -->
        <!-- <div v-if="Object.keys(publicInfo).length>0 && !showDoubleScreen" class="double-screen" @click="handleDoubleScreen">
          <i class="icon iconfont icon-shuangpingliulan"></i>
          <span>双屏展示</span>
        </div> -->
        <!-- 双屏展示-关闭按钮 -->
        <!-- <div v-if="showDoubleScreen" class="hide-double-screen" @click="handleDoubleScreen">
          <i class="icon iconfont icon-biaodannei_shanchu"></i>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { deleteTag } from "@/utils/utils.js";
import Tabs from "./Tabs";
import { mapState } from "vuex";
export default {
  inject: ["reload"],
  components: {
    Tabs,
  },
  data() {
    return {
      isTop: false,
      toggle: true,
      sqData: "",
      publicInfo: {},
      patentList: [],
      allList: [],
      totalRow: 0,
      currentPage: 1,
      pageSize: 10,
      activeName: "1",
      showDoubleScreen: false,
      emptyText: "数据加载中...",
      listName: "",
      queryObj: {},
      url: "",
      type: "",
      paramsType: "", //接口需要参数
      id: "",
      title: "", //原文
      title_en: "", //英文
      title_cn: "", //中文
    };
  },
  computed: {
    ...mapState(["searchWord"]),
  },
  watch: {
    "$route.query"() {
      this.publicInfo = {};
      this.showDoubleScreen = false;
      this.init();
    },
  },
  created() {
    this.type = this.$route.query.type;
    this.id = this.$route.query.id;
    const hideLeft = this.$route.query.left;
    if (hideLeft) {
      this.toggle = false;
    }
  },

  methods: {
    handleCollect() {
      let tit = "",
        sourceType = this.type.toUpperCase(),
        pi = this.publicInfo,
        esId = pi.id;
      // console.log(pi);
      if (pi.isCollection) {
        this.$confirm("您确定取消收藏吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$delete(
            `${this.$Url.collect.collectionDelete}/${pi.collectionId}`,
            {}
          ).then((res) => {
            this.$message({
              type: "success",
              message: "取消成功！",
            });
            this.publicInfo.isCollection = false;
          });
        });
      } else {
        if (this.type == "patent") {
          esId = pi.pn;
          tit = pi.ttl_zh || pi.ttl || pi.ttl_en;
        } else if (this.type == "paper") {
          tit = pi.title_zh || pi.title_ori;
        } else if (this.type == "achieve") {
          sourceType = "ACHIEVEMENT";
          tit = pi.achievement_name;
        } else if (this.type == "standard") {
          tit = pi.title;
        }
        tit = deleteTag(tit);
        // return;
        const param = {
          title: tit,
          sourceId: esId,
          sourceType: sourceType,
          userId: JSON.parse(localStorage.getItem("homeUserInfo")).id,
        };
        this.$post(this.$Url.collect.collectionAdd, param).then((res) => {
          this.$message({
            type: "success",
            message: "收藏成功！",
          });
          this.publicInfo.isCollection = true;
          this.publicInfo.collectionId = res.data;
        });
      }
    },
    goOrigin(url) {
      window.open(url, "_blank");
    },
    // 不同业务调用不同的接口名称
    setLeftListName(type) {
      switch (type) {
        case "patent":
          this.listName = "专利列表";
          this.paramsType = "patent";
          break;
        case "paper":
          this.listName = "论文列表";
          this.paramsType = "paper";
          break;
        case "achieve":
          this.listName = "成果列表";
          this.paramsType = "achieve";
          break;
        case "project":
          this.listName = "项目列表";
          this.paramsType = "project";
          break;
        case "standard":
          this.listName = "标准列表";
          this.paramsType = "standard";
          break;
        default:
          break;
      }
    },
    // 判断是否为中文 全部为中文
    isChinese(str) {
      // if( !str ){
      //   return
      // }else{
      //   var regEx = "[\u4e00-\u9fa5]";
      //   // var regEx = /^[\u4e00-\u9fa5]+$/;
      //   let flg = false;
      //   if (str.match(regEx)) flg = true;
      //   return flg;
      // }
      return /[\u4E00-\u9FA5]+/g.test(str);
    },
    // 判断是否为日文
    isJapanese(str) {
      if (!str) {
        return;
      } else {
        var regEx = "[\u0800-\u4e00]"; //部分为日文
        // var regEx = "[\u4e00-\u9fa5]";  //全部为日文
        let flg = false;
        if (str.match(regEx)) flg = true;
        return flg;
      }
    },

    // 通过监听路由的type区分业务，调用不同的接口
    init() {
      this.type = this.$route.query.type;
      this.setLeftListName(this.type);
      this.publicInfo = {};
      this.$get(this.$Url.search.commonGetInfo, {
        id: this.$route.query.id,
        index: this.paramsType,
      })
        .then((res) => {
          let data = res.data;
          if (data && Object.keys(data).length > 0) {
            // 处理专利数据
            if (this.type == "patent") {
              this.title = data?.ttl || data?.ttl_zh || data?.ttl_en || "";
              this.title_cn = this.isChinese(data?.ttl) ? "" : data.ttl_zh;
              this.publicInfo = data;
            } else if (this.type == "paper") {
              this.title = data.title_ori || "--";
              this.title_cn = this.isChinese(data?.title_ori)
                ? ""
                : data.title_zh;
              this.url = data.url;
              this.publicInfo = data;
            } else if (this.type == "achieve") {
              this.title = data.achievement_name || "--";
              data.keywords = data?.keywords?.join("、");
              data.drafting_unit = data?.drafting_unit?.join("、");
              data.contrib_full_name = data?.contrib_full_name?.join("、");
              this.publicInfo = data;
            } else if (this.type == "project") {
              this.title = data.pro_name_ori || "--";
              this.title_cn =
                !this.isJapanese(data?.pro_name_ori) &&
                this.isChinese(data.pro_name_ori)
                  ? ""
                  : data.pro_name;
              data.keywords_en = data?.keywords_en?.join("、");
              this.publicInfo = data;
            } else if (this.type == "standard") {
              data.draftsman = data?.draftsman?.join("、");
              data.drafting_unit = data?.drafting_unit?.join("、");
              this.title = data.title || "--";
              this.publicInfo = data;
            }
          } else {
            if (this.type == "patent") {
              this.$msgbox({
                message: "该专利尚未纳入数据库中",
                customClass: "no-patent-msgbox",
                showClose: false,
                showConfirmButton: false,
                closeOnClickModal: false, // 是否可通过点击遮罩关闭 MessageBox
                closeOnPressEscape: false, // 是否可通过按下 ESC 键关闭 MessageBox
                center: true,
              });
            }
            this.emptyText = "暂无数据";
          }
        })
        .catch((err) => {
          this.emptyText = "暂无数据";
        });
      if (!(this.$route.query.list && this.$route.query.list === "no")) {
        if (localStorage.getItem("detailLeftMenu")) {
          this.patentList = JSON.parse(localStorage.getItem("detailLeftMenu"));
        }
      } else {
      }
    },

    // 获取专利公开信息
    getPublicInfo(data) {
      let plist = data.result || [];
      if (plist.length > 0) {
        let v = plist[0];
        let abst = "";
        if (v.abst) {
          abst = v.abst;
        } else {
          abst = v.abst_en ? "" : "暂无";
        }
        let abst_en = "";
        if (v.abst_en) {
          abst_en = v.abst_en;
        } else {
          abst_en = v.abst ? "" : "暂无";
        }
        this.title = v.ttl || "--";
        let obj = {
          ttl: v.ttl || "--", // 标题
          apn: v.apn || "--", // 申请号
          apd: v.apd || "--", // 申请日
          pn: v.pn || "--", // 公开/公告号
          isd: v.isd || "--", // 公开/公告日
          an: (v.an && v.an.join("; ")) || "--", // 申请人
          in: (v.in && v.in.join("; ")) || "--", // 发明人
          pririnfo: v.pririnfo || "--", // 优先权
          ipc: (v.ipc && v.ipc.join("; ")) || "--", // ipc
          cpc: (v.cpc && v.cpc.join("; ")) || "--", // cpc
          ipcm: v.ipcm || "--", // 主分类号
          ads: v.ads || "--", // 地址
          abst: abst, // 中文摘要
          abst_en: abst_en, // 英文摘要
          score: (v.score && v.score.toFixed(2) + "%") || "--", // 相关度
          family_num: v.family_num || "--", // 同族数
          acc: v.acc || "--", // 权项数
          aclm: v.aclm || "--", // 权利要求
          aclm_zh: v.aclm_zh || "--", // 中文权利要求
          aclm_en: v.aclm_en || "--", // 英文权利要求
          spec: v.spec || "--", // 说明书
          spec_zh: v.spec_zh || "--", // 中文说明书
          spec_en: v.spec_en || "--", // 英文说明书
          na: v.na || "--", // 专利类型
        };
        this.publicInfo = obj;
      } else {
        this.emptyText = "暂无数据";
      }
    },

    toDetail(item) {
      this.$router.push({
        name: "DataCenterDetail",
        query: {
          id: item.id,
          type: this.type,
        },
      });
    },
    // 双屏展示
    handleDoubleScreen() {
      this.showDoubleScreen = !this.showDoubleScreen;
    },
    handleToggle() {
      this.toggle = !this.toggle;
    },
  },

  beforeMount() {
    // 判断是否嵌入了iframe
    window.self === window.top ? (this.isTop = false) : (this.isTop = true);
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  background-color: #fff;
  .flex-auto {
    flex: 1;
  }
  .tit-wrapper {
    display: flex;
    justify-content: space-between;
    .link_url {
      width: 100px;
      margin-right: 10px;
      color: $mainColor;
    }
  }
  .collect {
    cursor: pointer;
  }
  .el-icon-star-on {
    color: $color120;
    font-size: 0.4rem;
  }
  .btn {
    width: 120px;
    height: 40px;
    color: #fff;
    background-color: $mainColor;
    margin: 18px;
  }
}
.transIcon {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: $mainColor;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
}
::v-deep {
  .el-button--primary {
    border-color: $color141 !important;
    background-color: $color141 !important;
  }
  .el-checkbox__label {
    font-size: 12px !important;
    color: $color32;
  }
  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #000 !important;
  }
  .el-dropdown-menu__item {
    font-size: 12px !important;
  }
  .el-select-dropdown__item.selected {
    color: $color141 !important;
  }
  .el-pager li.active {
    color: $color141 !important;
  }
  // 选择数据源
  .el-dialog__header {
    background-color: $color4;
  }
  .el-dialog__body {
    padding: 0 20px !important;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: $color141 !important;
    background-color: $color141 !important;
  }
  .group-title-cnt .el-checkbox__label {
    font-size: 14px;
    font-weight: 700;
    color: #000 !important;
  }
  .group-world {
    .el-checkbox__input {
      line-height: normal;
    }
    .el-checkbox__label {
      font-size: 12px;
      color: #000 !important;
    }
  }
  // 筛选项
  .tree-items {
    .el-checkbox__label {
      padding-left: 5px;
      font-size: 12px !important;
    }
  }
  .mode-select,
  .sort-select {
    .el-input__inner {
      height: 34px;
      line-height: 34px;
      border: none;
      color: $color30;
    }
  }
  // 分页
  .pagination .page-size .el-input__inner {
    height: 28px;
    line-height: 28px;
  }
  .el-select-dropdown__item {
    text-indent: 10px;
  }
  // 详情
  .el-table {
    th {
      color: #5e5f73;
      background-color: #ecf4f7 !important;
    }
    .cell {
      font-size: 12px;
    }
    .el-table__body tr:hover td {
      background-color: #dfe3f5 !important;
    }
  }

  #boxContent {
    h4 {
      padding: 10px 0;
    }
    em {
      font-style: italic;
    }
    .Figure-img-box {
      // display: flex;
      // align-items: center;
      // justify-content: center;
      display: inline-block;
      width: 100%;
      height: 180px;
      // text-align: center;
    }
    .Figure-img {
      max-width: 100%;
      max-height: 180px;
    }
  }
}

.el-tabs__header {
  margin-bottom: 0 !important;
  background-color: $color23;
  // background-color: $color1;
}
.el-tabs__active-bar {
  background-color: $color49 !important;
}
.el-tabs__nav-wrap {
  &:after {
    height: 1px;
    background-color: $color2 !important;
  }
}

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  // height: calc(100vh - 20px);
  min-height: 600px;
  padding: 20px;
  box-sizing: border-box;
  background-color: $color152;
  overflow: hidden;
  // overflow-x: hidden;
  &.isTop {
    padding-top: 20px;
  }
  .patent-list {
    width: 240px;
    // height: calc(100vh - .7rem - 40px);
    margin-right: 20px;
    background-color: $color4;
    overflow-y: auto;
    position: relative;
    h2 {
      position: relative;
      height: 60px;
      line-height: 60px;
      padding: 0 20px;
      border-bottom: 1px solid $color142;
      margin-top: 0;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 700;
      color: #000;
    }
    .icon {
      position: absolute;
      top: 50%;
      right: 20px;
      width: 36px;
      height: 36px;
      line-height: 36px;
      margin-top: -18px;
      font-size: 25px;
      color: $color5;
      cursor: pointer;
    }
    .list-wrap {
      position: relative;
      margin-top: 0;
      margin-bottom: 0;
      list-style: none;
      li {
        position: relative;
        display: block;
        padding: 12px 20px;
        border: 1px solid $color142;
        font-weight: bold;
        background-color: $color2;
        cursor: pointer;
        &:hover {
          color: $mainColor;
        }
        &.active {
          color: $mainColor;
        }
        .index {
          position: absolute;
          top: 12px;
          left: 20px;
          width: 35px;
          line-height: 28px;
          font-size: 12px;
        }
        p {
          padding-left: 35px;
          margin-top: 0;
          margin-bottom: 0;
          span {
            display: block;
            line-height: 28px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .details-main {
    position: relative;
    flex: 1;
    min-width: 0;
    background-color: $color51;
    &.double-box {
      background-color: transparent;
    }
    h2 {
      position: relative;
      line-height: 35px;
      padding: 20px;
      border-bottom: 1px solid $color142;
      margin-top: 0;
      margin-bottom: 0;
      font-weight: bold;
      font-size: 18px;
      color: $color1;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      background-color: $color2;
      span {
        display: inline-block;
        margin-right: 10px;
      }
    }
    .main-box {
      position: relative;
      display: flex;
      height: calc(100% - 60px);
      &.double-box {
        .main-item-box {
          // flex: none;
          width: calc(50% - 10px);
          height: calc(100vh - 80px - 80px);
          // overflow-y: auto;
          &:first-of-type {
            margin-right: 10px;
          }
          &:last-of-type {
            margin-left: 10px;
          }
        }
        ::v-deep {
          .panel-main {
            padding-right: 20px;
            padding-bottom: 0;
            .panel-main-box {
              .claim-page,
              .instructions-page {
                height: auto;
              }
            }
          }
          .panel-aside {
            display: none !important;
          }
        }
      }
      .main-item-box {
        flex: 1;
        background-color: $color2;
        position: relative;
        .link_url {
          position: absolute;
          right: 30px;
          top: 15px;
          z-index: 1000;
          font-weight: bold;
        }
      }
    }
    ::v-deep {
      .eltabs {
        height: 100%;
        // height: calc(100% - 60px);
        .el-tabs__content {
          height: calc(100% - 50px);
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
.elpagination {
  width: 100%;
  padding: 20px 0;
  text-align: center;
  background-color: #fff;
}
.double-screen {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 120px;
  // height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: $color6;
  cursor: pointer;
  .icon {
    display: inline-block;
    padding-right: 4px;
    vertical-align: sub;
    font-size: 26px;
    color: $color141;
  }
  > span {
    display: inline-block;
    vertical-align: top;
  }
}
.hide-double-screen {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: $color141;
  cursor: pointer;
  .icon {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 40px;
  }
}
// animate
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  margin-right: -240px;
  opacity: 0;
}
.no-data {
  margin-top: 20px;
  font-size: 14px;
}

.aside-bar {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: calc(100vh - 60px);
  span {
    display: block;
    font-size: 20px;
    color: $color30;
  }
  &:hover {
    background-color: rgba(153, 153, 153, 0.1);
    cursor: pointer;
    span {
      color: $color141;
    }
  }
}
.tool {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: $color30;
  cursor: pointer;
  span {
    display: inline-block;
    margin-left: 10px;
    // &:nth-of-type(1) {
    //   margin-top: -1px;
    //   font-size: 13px;
    // }
    &.el-dropdown-link {
      padding-bottom: 2px;
      font-size: 14px;
    }
    &.pack-up {
      line-height: 32px;
      text-align: right;
      font-size: 26px;
      color: $color141;
      position: absolute;
      right: 0.1rem;
    }
    &:hover {
      color: $color141;
    }
  }
}

// animate
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  margin-left: -240px;
  opacity: 0;
}
</style>
<style lang="scss">
.no-patent-msgbox {
  padding: 20px 0;
  .el-message-box__btns {
    padding: 0;
  }
}
</style>
